<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写信</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: linear-gradient(45deg, #fbda61, #ff5acd);
      /* background-color: rgb(218, 141, 243); */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Courier New', Courier, monospace;
      font-size: 1.5rem;
      position: relative;
      overflow: hidden;
    }

    #message-container {
      width: 70%;
      height: 50%;
      overflow-y: scroll;
      padding: 20px;
      background-color: rgba(101, 79, 79, 0.4);
      border-radius: 10px;
      box-sizing: border-box;
      color: rgb(255, 255, 255);
      position: relative;
      z-index: 2;
    }

    #message {
      white-space: pre-wrap;
      text-align: left;
      line-height: 1.5;
    }

    .cursor {
      display: inline-block;
      width: 10px;
      background-color: white;
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {

      from,
      to {
        background-color: transparent;
      }

      50% {
        background-color: white;
      }
    }

    #canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    /* 3D方块样式 */
    .cube-container {
      position: absolute;
      bottom: 20px;
      right: 20px;
      perspective: 1000px;
      display: flex;
      gap: 10px;
    }

    .cube {
      width: 50px;
      /* 调整方块大小 */
      height: 50px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      transition: transform 1s ease;
    }

    .cube-face {
      position: absolute;
      width: 50px;
      /* 方块面大小与方块一致 */
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
      font-weight: bold;
      color: white;
      border: 1px solid #ccc;
    }

    .cube-face.front {
      transform: rotateY(0deg) translateZ(25px);
      background-color: pink;
    }

    .cube-face.back {
      transform: rotateY(180deg) translateZ(25px);
      background-color: pink;
      content: 'BACK';
    }

    .cube-face.left {
      transform: rotateY(-90deg) translateZ(25px);
      background-color: pink;
    }

    .cube-face.right {
      transform: rotateY(90deg) translateZ(25px);
      background-color: pink;
    }

    .cube-face.top {
      transform: rotateX(90deg) translateZ(25px);
      background-color: pink;

    }

    .cube-face.bottom {
      transform: rotateX(-90deg) translateZ(25px);
      background-color: pink;
    }

    #cube1 .cube-face.front {
      content: 'I';
    }

    #cube1 .cube-face.back {
      content: 'I';
    }

    #cube1 .cube-face.left {
      content: 'I';
    }

    #cube1 .cube-face.right {
      content: 'I';
    }

    #cube1 .cube-face.top {
      content: 'I';
    }

    #cube1 .cube-face.bottom {
      content: 'I';
    }

    #cube2 .cube-face.front {
      content: 'LOVE';
    }

    #cube2 .cube-face.back {
      content: 'LOVE';
    }

    #cube2 .cube-face.left {
      content: 'LOVE';
    }

    #cube2 .cube-face.right {
      content: 'LOVE';
    }

    #cube2 .cube-face.top {
      content: 'LOVE';
    }

    #cube2 .cube-face.bottom {
      content: 'LOVE';
    }

    #cube3 .cube-face.front {
      content: 'YOU';
    }

    #cube3 .cube-face.back {
      content: 'YOU';
    }

    #cube3 .cube-face.left {
      content: 'YOU';
    }

    #cube3 .cube-face.right {
      content: 'YOU';
    }

    #cube3 .cube-face.top {
      content: 'YOU';
    }

    #cube3 .cube-face.bottom {
      content: 'YOU';
    }
  </style>
</head>

<body>
  <div id="message-container">
    <div id="message"></div>
  </div>
  <canvas id="canvas"></canvas>

  <div class="cube-container">
    <div class="cube" id="cube1">
      <div class="cube-face front">I</div>
      <div class="cube-face back">I</div>
      <div class="cube-face left">I</div>
      <div class="cube-face right">I</div>
      <div class="cube-face top">I</div>
      <div class="cube-face bottom">I</div>
    </div>
    <div class="cube" id="cube2">
      <div class="cube-face front">LOVE</div>
      <div class="cube-face back">LOVE</div>
      <div class="cube-face left">LOVE</div>
      <div class="cube-face right">LOVE</div>
      <div class="cube-face top">LOVE</div>
      <div class="cube-face bottom">LOVE</div>
    </div>
    <div class="cube" id="cube3">
      <div class="cube-face front">YOU</div>
      <div class="cube-face back">YOU</div>
      <div class="cube-face left">YOU</div>
      <div class="cube-face right">YOU</div>
      <div class="cube-face top">YOU</div>
      <div class="cube-face bottom">YOU</div>
    </div>
  </div>

  <script>
    const message = "  亲爱的 [名字],\n\n你是我生命中最特别的存在。每当我想到你，心中便充满了无限的喜悦和温暖。我希望能与你分享更多美好的时光，共同创造属于我们的回忆。\n\n我喜欢你。\n\n[你的名字]";
    let index = 0;
    const speed = 100; // 打字速度，越小越快

    function typeWriter() {
      if (index < message.length) {
        const currentChar = message.charAt(index) === " " ? "&nbsp;" : message.charAt(index);
        document.getElementById("message").innerHTML = message.slice(0, index) + '<span class="cursor">_</span>';

        setTimeout(() => {
          document.getElementById("message").innerHTML = message.slice(0, index + 1) + '<span class="cursor"></span>';
          index++;
          typeWriter();
        }, speed);
      } else {
        document.querySelector(".cursor").style.display = 'none'; // 最后隐藏光标
      }
    }

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particles = [];

    function createFirework() {
      const numberOfParticles = Math.floor(Math.random() * 20) + 10;
      const angleStep = 360 / numberOfParticles;
      const startX = Math.random() * canvas.width;
      const startY = Math.random() * (canvas.height / 3);

      for (let i = 0; i < numberOfParticles; i++) {
        const hue = Math.random() * 360;
        const lightness = Math.random() * 30 + 70;
        const color = `hsl(${hue}, 100%, ${lightness}%)`;

        const angle = i * angleStep;
        const distance = Math.random() * 200 + 100;

        const velocityX = distance * Math.cos(angle * (Math.PI / 180)) / 100;
        const velocityY = distance * Math.sin(angle * (Math.PI / 180)) / 100;

        particles.push({
          x: startX,
          y: startY,
          velocityX: velocityX,
          velocityY: velocityY,
          color: color,
          life: 1,
          history: [],
          trailLength: Math.floor(Math.random() * 20) + 20 // 随机拖尾长度在20-40px之间
        });
      }
    }

    function updateParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      particles.forEach((particle, index) => {
        // 更新粒子位置和历史位置
        particle.history.push({ x: particle.x, y: particle.y });
        if (particle.history.length > particle.trailLength) {
          particle.history.shift(); // 保持历史位置长度为随机生成的trailLength
        }

        // 逐渐减速
        particle.velocityX *= 0.98;
        particle.velocityY *= 0.98;

        particle.x += particle.velocityX;
        particle.y += particle.velocityY;
        particle.life -= 0.01;

        // 绘制拖尾
        ctx.beginPath();
        for (let i = 0; i < particle.history.length; i++) {
          const point = particle.history[i];
          const alpha = (i + 1) / particle.history.length; // 拖尾透明度递减
          ctx.globalAlpha = alpha;
          ctx.fillStyle = particle.color;
          ctx.fillRect(point.x, point.y, 3, 3);
        }

        // 绘制当前粒子
        ctx.globalAlpha = 1; // 粒子本身不透明
        ctx.fillStyle = particle.color;
        ctx.fillRect(particle.x, particle.y, 3, 3);

        if (particle.life <= 0) {
          particles.splice(index, 1);
        }
      });
    }

    function animate() {
      updateParticles();
      requestAnimationFrame(animate);
    }

    // 每隔一秒生成一个烟花
    setInterval(createFirework, 1000);

    window.onload = () => {
      typeWriter();
      animate();
      rotateCubes();
    };

    // 控制方块旋转
    function rotateCubes() {
      const cubes = document.querySelectorAll('.cube');
      let currentCube = 0;

      function rotateNextCube() {
        cubes[currentCube].style.transform += `rotateY(90deg)`; // 旋转方向从屏幕外向内
        currentCube++;

        if (currentCube >= cubes.length) {
          currentCube = 0;
        }

        setTimeout(rotateNextCube, 1000); // 1秒钟转动一个方块，循环进行
      }

      rotateNextCube();
    }


  </script>
</body>

</html>